<template>
  <div class="ticket-management">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>工单管理</span>
        </div>
      </template>
      <div class="content">
        <div class="toolbar">
          <el-button type="primary" @click="handleCreateTicket">创建工单</el-button>
          <el-button @click="handleRefresh">刷新</el-button>
        </div>
        
        <el-tabs v-model="activeTab">
          <el-tab-pane label="工单列表" name="list">
            <el-table :data="tickets" style="width: 100%" v-loading="loading">
              <el-table-column prop="id" label="工单编号" width="120" />
              <el-table-column prop="title" label="标题" width="250" />
              <el-table-column prop="customer" label="客户" width="150" />
              <el-table-column prop="priority" label="优先级" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.priority === 'high' ? 'danger' : scope.row.priority === 'medium' ? 'warning' : 'info'">
                    {{ scope.row.priority === 'high' ? '高' : scope.row.priority === 'medium' ? '中' : '低' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.status === 'open' ? 'danger' : scope.row.status === 'processing' ? 'warning' : scope.row.status === 'resolved' ? 'success' : 'info'">
                    {{ scope.row.status === 'open' ? '待处理' : scope.row.status === 'processing' ? '处理中' : scope.row.status === 'resolved' ? '已解决' : '已关闭' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="assignee" label="处理人" width="120" />
              <el-table-column prop="createdAt" label="创建时间" width="180" />
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button link type="primary" @click="handleViewTicket(scope.row)">查看</el-button>
                  <el-button link type="success" @click="handleAssignTicket(scope.row)">分配</el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <div class="pagination-container" style="margin-top: 20px;">
              <el-pagination
                :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalTickets"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="工单分配" name="assignment">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>待分配工单</span>
                    </div>
                  </template>
                  <div class="assignment-content">
                    <el-table :data="unassignedTickets" style="width: 100%">
                      <el-table-column prop="id" label="工单编号" width="120" />
                      <el-table-column prop="title" label="标题" />
                      <el-table-column prop="priority" label="优先级" width="100">
                        <template #default="scope">
                          <el-tag :type="scope.row.priority === 'high' ? 'danger' : scope.row.priority === 'medium' ? 'warning' : 'info'">
                            {{ scope.row.priority === 'high' ? '高' : scope.row.priority === 'medium' ? '中' : '低' }}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="120">
                        <template #default="scope">
                          <el-button link type="primary" @click="handleAssign(scope.row)">分配</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-card>
              </el-col>
              
              <el-col :span="12">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>客服人员</span>
                    </div>
                  </template>
                  <div class="staff-content">
                    <el-table :data="supportStaff" style="width: 100%">
                      <el-table-column prop="name" label="姓名" width="120" />
                      <el-table-column prop="online" label="在线状态" width="100">
                        <template #default="scope">
                          <el-tag :type="scope.row.online ? 'success' : 'info'">
                            {{ scope.row.online ? '在线' : '离线' }}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column prop="assignedTickets" label="已分配工单" width="120" />
                      <el-table-column label="操作" width="120">
                        <template #default="scope">
                          <el-button link type="primary" @click="handleViewStaff(scope.row)">详情</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          
          <el-tab-pane label="工单统计" name="statistics">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-item">
                    <div class="stat-value">{{ totalTickets }}</div>
                    <div class="stat-label">总工单数</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-item">
                    <div class="stat-value">{{ resolvedTickets }}</div>
                    <div class="stat-label">已解决</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-item">
                    <div class="stat-value">{{ avgResolutionTime }}</div>
                    <div class="stat-label">平均解决时间</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-item">
                    <div class="stat-value">{{ satisfactionRate }}%</div>
                    <div class="stat-label">满意度</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            
            <div class="chart-container" style="margin-top: 20px;">
              <el-card>
                <div ref="ticketChartRef" style="width: 100%; height: 300px;"></div>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('list')
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const totalTickets = ref(128)

// 模拟工单数据
const tickets = ref([
  { id: 'TK202304001', title: '无法登录系统', customer: '北京科技有限公司', priority: 'high', status: 'open', assignee: '未分配', createdAt: '2023-04-15 14:30:22' },
  { id: 'TK202304002', title: '对账功能异常', customer: '上海信息技术公司', priority: 'medium', status: 'processing', assignee: '张三', createdAt: '2023-04-15 10:15:45' },
  { id: 'TK202304003', title: '报表导出失败', customer: '广州软件开发公司', priority: 'low', status: 'resolved', assignee: '李四', createdAt: '2023-04-14 16:22:18' }
])

// 待分配工单
const unassignedTickets = ref([
  { id: 'TK202304004', title: 'API接口响应慢', priority: 'high' },
  { id: 'TK202304005', title: '数据同步失败', priority: 'medium' },
  { id: 'TK202304006', title: '界面显示异常', priority: 'low' }
])

// 客服人员
const supportStaff = ref([
  { name: '张三', online: true, assignedTickets: 5 },
  { name: '李四', online: true, assignedTickets: 3 },
  { name: '王五', online: false, assignedTickets: 0 }
])

// 统计数据
const resolvedTickets = ref(98)
const avgResolutionTime = ref('2.5小时')
const satisfactionRate = ref(92)
const ticketChartRef = ref()

// 方法
const handleCreateTicket = () => {
  console.log('创建工单')
}

const handleRefresh = () => {
  console.log('刷新工单列表')
}

const handleViewTicket = (row: any) => {
  console.log('查看工单', row)
}

const handleAssignTicket = (row: any) => {
  console.log('分配工单', row)
}

const handleSizeChange = (val: number) => {
  pageSize.value = val
  console.log('每页条数变化', val)
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  console.log('当前页变化', val)
}

const handleAssign = (row: any) => {
  console.log('分配工单给客服', row)
}

const handleViewStaff = (row: any) => {
  console.log('查看客服详情', row)
}
</script>

<style scoped>
.ticket-management {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.toolbar {
  margin-bottom: 20px;
}

.toolbar .el-button {
  margin-right: 10px;
}

.stat-card {
  text-align: center;
}

.stat-item {
  padding: 20px 0;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}

.chart-container {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
}
</style>